<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>title</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="./vue.js"></script>
	</head>
	<style>
		html,
		body {
			margin: 0;
			padding: 0;
		}
	</style>

	<body>
		<div id="app">
			<div>{{message}}</div>
			<blue-button></blue-button>
			<a href="https://vuejs.org/v2/guide/components-registration.html"
				>Vue.js docs</a
			>
		</div>
		<script>
			import BlueButton from './bluebutton.vue' //引入组件进行使用
			Vue.component('blue-button', { BlueButton })
			new Vue({
				el: '#app',
				data: {
					message: 'Using Single File Components', //使用单个的文件组件
				},
				// components: {
				//     'blue-button': BlueButton
				// },
			})
		</script>
	</body>
</html>
